<template>
	<div class="app">
		<h2>姓名：{{ person.name }}</h2>
		<h2>年龄：{{ person.age }}</h2>
		<button @click="person.age+=1">年龄+1</button>
		<hr>
		<h2>品牌：{{ car2.brand }}</h2>
		<h2>价格：{{ car2.price }}</h2>
		<button @click="car2.price += 10">点我价格+10</button>

	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,toRaw,markRaw} from 'vue'
	// toRaw
	let person = reactive({
		name:'zhangsan',
		age:20
	})
	let person2 = toRaw(person)  //得到响应式对象的原始对象
	console.log('响应式对象',person);
	console.log('原始对象',person2); 
	
	// markRaw
	// let car = {brand:'benchi',price:100}
	// car.price += 1
	// let car2 = reactive(car)
	let car = markRaw({brand:'benchi',price:100})    //markRow标记一个对象，永远是原始对象
	car.price += 1
	let car2 = reactive(car)
	console.log(car)
	console.log(car2);
	
	

</script>

<style scoped>
	.app{
		margin: 10px auto;
		padding: 10px;
		background-color: skyblue;
		border-radius: 10px;
		box-shadow: 0  0 10px;
	}
	button{
		height: 30px;
		margin: 5px;
	}
</style>